<template>
  <rx-dialog @cancel="cancel" @handOk="handOk">
    <div class="flexBox">
      <div  v-for="icon in iconList">
        <mb-icon :type="icon" class="divicon"  @click="selectIcon(icon)"></mb-icon>
      </div>

    </div>
  </rx-dialog>
</template>

<script>
import SysFileApi from '@/api/system/core/sysFile'
import {Util} from "@lowcode/jpaas-common-lib"

export default {
  name: 'FormMobileList',
  props: {
    layerid: {
      type: String,
      default: ""
    },
    destroy: {
      type: Function
    }
  },
  data() {
    return {
      iconList: [],
      chooseicon: ""
    }

  },
  mounted() {
    this.init();
  },
  methods: {
    getIcon(icon) {
      return 'divicon iconfont ' + icon;
    },
    selectIcon(icon) {
      this.chooseicon = icon;
      Util.closeWindow(this, "ok");

    },

    init(){
      var baseURL = process.env.VUE_APP_ADMIN_FRONT;

      var _url1 ;
      if(baseURL != "/"){
        _url1 = `${baseURL}/mobileIconfont/iconfont.css`
      }else {
        _url1 = `/mobileIconfont/iconfont.css`
      }
      let self_=this;
      this.getIconfont(_url1).then(res=>{
        self_.iconList = res;
        console.info(self_.iconList)
      });
    },
    cancel() {
      Util.closeWindow(this, "cancel");
    },
    handOk() {
      Util.closeWindow(this, "ok");
    },
    getIconfont(url) {
      let promise = new Promise(function (resolve, reject) {
        let xhr = new XMLHttpRequest();
        var _self = this;
        xhr.open('GET', url);
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            let ary = [];
            var data = xhr.responseText;
            var myregexp = /\.(.+):before/mg;
            var match = myregexp.exec(data);
            while (match != null) {
              ary.push(match[1]);
              match = myregexp.exec(data);
            }
            resolve(ary);
          }
        }
        xhr.send();
      });
      return promise;
    },
  }
}
</script>
<style scoped>

* {
  font-family: '微软雅黑';
}

.iconfont {
  color: #2eaeff;
}

.displayPannel {
  width: 504px;
}

.divicon {
  cursor: pointer;
  border: 1px solid white;
  border-radius: 4px;
  width: 39px;
  height: 39px;
  line-height: 39px;
  font-size: 24px;
  background: #efefef !important;
  margin: 1px;
  text-align: center;
}

.divicon:last-child::after {
  content: '';
  display: block;
  clear: both;
}

.divicon:hover {
  border: 1px solid #BCD2EE;
}

.divicon::before {
  font-size: 24px;
  height: 38px;
  width: 38px;
  line-height: 40px;
  font-weight: normal;
  padding-right: 0;
  margin-right: 0;
}

.flexBox {
  display: flex;
  flex-wrap: wrap;
}
</style>

